<template>
  <div >
    <form-head @onSubmit="onSubmit" :is_change="is_change"/>
    <el-form ref="form" :rules="rules" :model="form" label-width="100px" class="layout-all form-width" >
      <el-form-item label="优惠券名:" prop="title">
        <el-input v-model="form.title" placeholder="请输入优惠券名" />
      </el-form-item>
      <el-form-item label="使用类型:" prop="type">
        <el-select v-model="form.type" placeholder="请选择使用类型">
          <el-option
            v-for="(item,i) in type_options"
            :key="i"
            :label="item"
            :value="i"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="指定商品查询:" prop="shop" >
        <el-autocomplete
          v-model="form.goods_title"
          :fetch-suggestions="querySearchAsync"
          :trigger-on-focus="true"
          placeholder="请输入商品名称"
          @select="handleSelect"
          class="form-width-w"
        >
          <i
            slot="suffix"
            class="el-icon-edit el-input__icon"
          />
          <template slot-scope="{item}">
            <el-table
              :data="item"
              stripe
              align="center"
              highlight-current-row
              style="width: 100%"
              @row-click="rowClick"
            >
              <el-table-column prop="title" label="商品名" width="100" />
              <el-table-column prop="thumb" label="封面" width="150">
                <template slot-scope="scope">
                  <img :src="scope.row.thumb" width="100">
                </template>
              </el-table-column>
              <!-- <el-table-column prop="create_time" label="创建时间" width="180" /> -->
              <el-table-column prop="show_price" label="展示价格" width="100" />
              <el-table-column prop="real_price" label="真实价格" width="100" />
              <!-- <el-table-column prop="pv" label="pv" width="100" /> -->
              <el-table-column prop="description" label="描述" />
            </el-table>
          </template>
        </el-autocomplete>
      </el-form-item>
      <!-- <el-form-item label="分类类别:" prop="shop_cate">
        <el-select v-model="form.shop_cate" placeholder="请选择分类类别">
          <el-option
            v-for="item in cate_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="指定系统分类:" prop="cate">
         <el-cascader
          v-model="cate_options"
          clearable
          :props="props_shop"
          :options="options"
          class="form-width-w"
          placeholder="请选择系统分类"
          @change="handleCate($event)"
        >
          <template slot-scope="{ node, data }">
            <span>{{ data.title }}</span>
            <span v-if="!node.isLeaf"> ({{ data.sub.length }}) </span>
          </template>
        </el-cascader>

      </el-form-item>
      <el-form-item label="指定店铺分类:" prop="shop_cate">
        <el-cascader
          v-model="shop_options"
          clearable
          :props="props_shop1"
          :options="options2"
          placeholder="请选择店铺分类"
          @change="handleShopCate($event)"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="金额类型:" prop="type">
        <el-select v-model="form.price_type" placeholder="请选择金额类型">
          <el-option
            v-for="item in pricetype_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="金额:" prop="number">
        <el-input v-model="form.number" placeholder="请输入金额" class="form-width-n"/>
      </el-form-item>
      <el-form-item label="最小金额:" prop="min_price">
        <el-input v-model="form.min_price" placeholder="请输入最小金额" class="form-width-n"/>
      </el-form-item>
      <el-form-item label="有效期/天:" prop="period">
        <el-input v-model="form.period" placeholder="请输入有效期" class="form-width-n"/>
      </el-form-item>
      <!-- <el-form-item label="发放类型:" prop="grant">
        <el-select v-model="form.grant" placeholder="请选择发放类型">
          <el-option
            v-for="item in grant_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="发放数量:" prop="create_num">
        <el-input v-model="form.create_num" placeholder="请输入发放数量" type="number" class="form-width-n"/>
      </el-form-item>
      <el-form-item label="已领取数量:" prop="send_num" v-if="form.type!=1">
        <el-input v-model="form.send_num" placeholder="请输入已领取数量" type="number" class="form-width-n"/>
      </el-form-item>
      <el-form-item label="已使用数量:" prop="use_num" v-if="form.type!=1">
        <el-input v-model="form.use_num" placeholder="请输入已使用数量" type="number" class="form-width-n"/>
      </el-form-item>
      <el-form-item label="描述:" prop="desc">
        <el-input v-model="form.desc" clearable show-word-limit type="textarea" maxlength="30" placeholder="请输入描述" class="form-width-w"/>
      </el-form-item>
      <el-form-item label="注册赠送:" prop="is_register_give">
        <el-switch
          v-model="form.is_register_give"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </el-form-item>
      
      <el-form-item label="是否启用:" prop="status">
        <el-switch
          v-model="form.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name:'coupon_form',
  data() {
    return {
      id: 0,
      is_change: undefined,
      shop_name: '',
      shop_id: 0,
      options2: [],
      props_shop: {
        value: 'id',
        label: 'title',
        children: 'sub',
        checkStrictly : true
      },
      props_shop1: {
        value: 'id',
        label: 'title',
        children: 'sub',
      },
      options: [],
      shop_options: [],
      cate_options: [],
      type_options: [],
      pricetype_options: [
        { value: 1, label: '百分比' },
        { value: 2, label: '固定值' }
      ],
      // grant_options: [
      //   { value: 0, label: '新用户注册' },
      //   { value: 1, label: '下单赠送' },
      //   { value: 2, label: '按用户发放' },
      //   { value: 3, label: '免费领取' },
      //   { value: 4, label: '线下发放' }
      // ],
      form: {status:true,is_register_give:false},
      rules: {
        title: [
          { required: true, message: '请输入优惠券名', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择使用类型', trigger: 'blur' }
        ],
        price_type: [
          { required: true, message: '请输入金额类型', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '请输入金额', trigger: 'blur' }
        ],
        min_price: [
          { required: true, message: '请输入最小金额', trigger: 'blur' }
        ],
        period: [
          { required: true, message: '请输入有效期/天', trigger: 'blur' }
        ],
        // grant: [
        //   { required: true, message: '请选择发放类型', trigger: 'blur' }
        // ],
        create_num: [
          { required: true, message: '请输入发放数量', trigger: 'blur' }
        ],
        send_num: [
          { required: true, message: '请输入已领取数量', trigger: 'blur' }
        ],
        use_num: [
          { required: true, message: '请输入已使用数量', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.id = (this.$route.params && this.$route.params.id)||0
    this.$setTagsViewTitle(this.id)
    this.init_into()
  },
  methods: {
    // 提交
    onSubmit(formName) {
      const form = this.form
      this.$refs[formName].validate(valid => {
        // if (form.type === 1 && !this.shop_name) {
        //   this.$message.error('请选择商品')
        //   return false
        // }
        if (parseInt(form.create_num) < parseInt(form.send_num)) {
          this.$message.error('领取数量不能大于发送数量')
          return false
        }
        if (parseInt(form.use_num) > parseInt(form.send_num)) {
          this.$message.error('使用数量不能大于领取数量')
          return false
        }
        if (parseInt(form.use_num) > parseInt(form.create_num)) {
          this.$message.error('使用数量不能大于发送数量')
          return false
        }
        if (valid) {
          form.id = this.id
          form.status === true ? form.status = 1 : form.status = 0
          form.is_register_give = form.is_register_give ? 1 :0
          this.get('/shop/Coupon/save', form, 'POST').then(e => {
            this.$back()
          })
          
        } else {
          console.log('error submit!!')
          return false
        }
      })
      console.log('submit!')
    },
    // 查询商品的数据
    querySearchAsync(queryString, cb) {
      const list = []
      const form = {
        title: queryString
      }
      this.get('/shop/Coupon/goods', form, 'POST').then(e => {
        // list[0] = JSON.parse(JSON.stringify(e.list.data).replace(/title/g, 'value'))
        list[0] = e.list
        // 调用 callback 返回建议列表的数据
        cb(list)
      })
    },
    // 获取选中的商品id
    rowClick(r, c, e) {
      this.shop_id = r.id
    },
    // 获取查询过来的对象数组
    handleSelect(item) {
      var index = 0
      for (var i = 0; i < item.length; i++) {
        if (this.shop_id === parseInt(item[i].id)) {
          index = i
        }
      }
      this.form.goods_title = item[index].title
      this.form.goods_id = item[index].id
    },
    // 返回
    bk() {
      this.$router.back()
    },
    // 获取当前数据
    init_into() {
      this.get('/shop/Coupon/info?id=' + this.id, 'POST').then(e => {
        this.cate_options = []
        this.shop_options = []
        this.type_options = e.type_arr

        this.options = e.cate
        this.options2 = e.shop_cate
        const tpl = e.info.tpl
        if(this.id>0){
          this.form = tpl
          this.cate_options.push(this.form.cate_t1_id)
          this.cate_options.push(this.form.cate_t2_id)
          this.cate_options.push(this.form.cate_t3_id)
          this.shop_options.push(this.form.shop_cate_t1_id)
          this.form.status = this.form.status == 1
          this.form.is_register_give = this.form.is_register_give == 1
          this.form.shop_id = e.shop_id

        }
        setTimeout(()=>{this.is_change=false},100)
      })
    },

    // 系统分类分类赋值
    handleCate(val) {
      if(val.length==0){
        this.form.cate_t1_id = 0
        this.form.cate_t2_id = 0
        this.form.cate_t3_id = 0
      }else{
        this.form.cate_t1_id = val[0]
        this.form.cate_t2_id = val[1]
        this.form.cate_t3_id = val[2]
      }
    },
    // 商品分类赋值
    handleShopCate(val) {
      if(val.length==0){
        this.form.shop_cate_t1_id = 0
      }else{
        this.form.shop_cate_t1_id = val[0]
      }
    }
  },
  watch: {
    form:{
      handler (val, oldVal) {
        if(this.is_change!=undefined)
        this.is_change=true
      },
      deep:true
    }
  }
}
</script>

<style>
.layout-all {
  margin: 10px;
}
</style>
